<template>
  <div class="detail-container detail-user-container">
    <div>
      <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入用户手机号" />
        </el-form-item>
        <el-form-item label="选择权限" prop="region">
          <el-select
            v-model="form.region"
            placeholder="请选择活动区域"
            style="width: 100%"
          >
            <el-option
              v-for="item in rolesLit"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            autocomplete="off"
            placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="form.checkPass"
            autocomplete="off"
            placeholder="请再次输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注 " prop="desc">
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="备注用户信息"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import DataOptions from "../dataOptions";
import { addnewUser, putUserlist } from "../../../api/user";
export default {
  name: "UserForm",
  inject: ["upDataDetailId"],
  props: {
    datailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      detailID: "",
      rolesLit: DataOptions.roles,
      form: {
        name: "",
        phone: "",
        region: "",
        desc: "",
        password: "",
        checkPass: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入用户手机", trigger: "blur" },
          { min: 1, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请输入备注", trigger: "blur" },
          {
            min: 2,
            max: 200,
            message: "长度在2-200个字符以内",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "blur" },
        ],
        password: [
          { required: true, trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.detailID = this.datailData.id || null;
    if (this.detailID) {
      this.form.name = this.datailData.name || null;
      this.form.phone = this.datailData.phone || null;
      this.form.region = this.datailData.region || null;
      this.form.desc = this.datailData.desc || null;
      this.form.password = this.datailData.password || null;
      this.form.checkPass = this.datailData.password || null;
    }
  },
  methods: {
    onSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const obj = {
            name: this.form.name,
            password: this.form.password,
            phone: this.form.phone,
            desc: this.form.desc,
            region: this.form.region,
          };
          if (!this.detailID) {
            addnewUser(obj).then((resp) => {
              if (resp.status === "0") {
                this.$notify({
                  title: "成功",
                  message: "数据提交成功",
                  type: "success",
                });
                this.$store.commit("app/stateUserListChange", false);
              } else {
                this.$notify({
                  title: "警告",
                  message: "修改失败",
                  type: "warning",
                });
              }
              this.upDataDetailId({
                id: null,
                type: null,
              });
            });
          } else {
            obj.eventID = this.detailID;
            putUserlist(obj).then((resp) => {
              if (resp === 1) {
                this.$notify({
                  title: "成功",
                  message: "数据修改成功",
                  type: "success",
                });
                this.$store.commit("app/stateUserListChange", false);
              } else {
                this.$notify({
                  title: "警告",
                  message: "修改失败",
                  type: "warning",
                });
              }
              this.upDataDetailId({
                id: null,
                type: null,
              });
            });
          }
        } else {
          this.$notify({
            title: "警告",
            message: "信息不完整，请先完善信息",
            type: "warning",
          });
        }
      });

      // let isSubmit = true;
      // Object.keys(this.form).forEach((key) => {
      //   if (!this.form[key]) {
      //     isSubmit = false;
      //     return;
      //   }
      // });
      // if (!isSubmit) {
      //   this.$notify({
      //     title: "警告",
      //     message: "信息不完整，请先完善信息",
      //     type: "warning",
      //   });
      // } else {
      //   this.$notify({
      //     title: "成功",
      //     message: "数据提交成功",
      //     type: "success",
      //   });
      //   if (this.detailID) {
      //     DataOptions.user.forEach((item) => {
      //       if (item.id + "" === this.detailID) {
      //         item.name = this.form.name || null;
      //         item.name = this.form.phone || null;
      //         item.role = this.form.region || null;
      //       }
      //     });
      //   } else {
      //     DataOptions.user.push({
      //       id: DataOptions.user.length + 3,
      //       name: this.form.name,
      //       roleValue: this.form.region,
      //       role: this.rolesLit.find((item) => item.value === this.form.region)
      //         .label,
      //       phone: this.form.phone,
      //       createTime: "2021-03-11 12:00:12",
      //       userDetail: {},
      //     });
      //   }
      //   // setTimeout(() => {
      //   //   this.closeContainer();
      //   // }, 600);
      // }
    },
    closeContainer() {
      this.$router.go(-1);
    },
  },
  watch: {
    datailData() {
      this.form.name = this.datailData.name;
      this.form.phone = this.datailData.phone;
      this.form.region = this.datailData.region;
      this.form.desc = this.datailData.desc;
      this.form.password = this.datailData.password;
      this.form.checkPass = this.datailData.password;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 60%;
    height: 90%;
  }
}
</style>
<style>
.detail-user-container .el-form-item__label {
  color: #ffffff;
}
.detail-user-container .el-input__inner,
.detail-user-container .el-textarea__inner {
  background-color: transparent;
  color: #f2f2f2;
}
</style>